<template>
    <div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <form class="layui-form layui-col-space5">
                                <div class="layui-inline layui-show-xs-block">
                                    <input type="text" name="username"  placeholder="请输入用户名" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
                                </div>
                            </form>
                        </div>
                        <div class="layui-card-header">
                            <button class="layui-btn" @click="addLead()"><i class="layui-icon"></i>添加</button>
                        </div>
                        <div class="layui-card-body layui-table-body layui-table-main">
                            <table class="layui-table layui-form">
                                <thead>
                                <tr>
                                    <th style="width: 70px">姓名</th>
                                    <th style="width: 90px">手机</th>
                                    <th style="width: 100px;">模糊信息</th>
                                    <th style="width: 200px;">模糊需求</th>
                                    <th>来源</th>
                                    <th>线索池</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="item in leadData">
                                    <td>
                                        {{item.name}}
                                    </td>
                                    <td>
                                        {{item.phone}}
                                    </td>
                                    <td>
                                        {{item.company}}
                                    </td>
                                    <td>
                                        {{item.leadsDetail}}
                                    </td>
                                    <td>
                                        {{item.clientSource}}
                                    </td>
                                    <td>
                                        {{getPool(item.leadsPool)}}
                                    </td>
                                    <td class="td-manage">
                                        <a title="编辑" class="layui-btn" @click.stop="openedit(item)" href="javascript:;">
                                            <i class="layui-icon">&#xe642;</i>
                                        </a>&nbsp
                                        <a title="退回" class="layui-btn layui-btn-warm" @click.stop="returnlead(item)" href="javascript:;">
                                            <i class="layui-icon">退回</i>
                                        </a>&nbsp
                                    </td>

                                </tr>
                                </tbody>
                            </table>
                            <my-page :total="count"></my-page>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    import { mapActions, mapState } from "vuex";
    import leadedit from './lead-edit';
    import page from './pagination7'
    import leadadd from './lead-add'
    import leadlog from './leadreturnlog'

    export default {
        data(){
            return{
            }
        },
        name: "myleads",
        components:{
            'my-page':page
        },
        created() {
            this.getmyleads();
            this.getmyleadsCounts();
        },
        computed:{
            ...mapState({
                leadData:state=>state.myleadData,
                count:state=>state.myleadCount,
            })
        },
        methods:{
            getPool(poolid){
                if(poolid === "1"){
                    return "文化纸线索池"
                }
                if(poolid === "2"){
                    return  "包装纸线索池"
                }
            },
            member_del(obj,id,client){
                let vm = this
                layer.confirm('确认删除 '+client+' ？',function(){
                    vm.deletelead(id);
                    setTimeout(vm.getleads,500);
                    setTimeout(vm.getleadsCounts,500);
                });
            },
            openedit(item){
                this.$layer.open({
                    id:1,
                    type:2,
                    content: {
                        content: leadedit, //传递的组件对象
                        parent: this,//当前的vue对象
                        data:{singleLead:item}//props
                    },
                    area:['800px','600px'],
                    title: '编辑 '+item.name+' 的用户信息',
                    maxmin: true,
                });
            },
            returnlead(item){
                this.$layer.open({
                    id:1,
                    type:2,
                    content: {
                        content: leadlog, //传递的组件对象
                        data:{singleLead:item}//props
                    },
                    area:['600px','300px'],
                    title: '退回线索',
                    maxmin: true,
                });
            },
            addLead(){
                this.$layer.open({
                    id:1,
                    type:2,
                    content: {
                        content: leadadd, //传递的组件对象
                        parent: this,//当前的vue对象
                    },
                    area:['800px','600px'],
                    title: '添加新用户',
                    maxmin: true,
                });
            },
            ...mapActions(["getmyleads","getmyleadsCounts","deletelead"])
        },
        mounted(){
            layui.use(['laydate','form'], function(){
                var laydate = layui.laydate;
                var  form = layui.form;


                // 监听全选
                form.on('checkbox(checkall)', function(data){

                    if(data.elem.checked){
                        $('tbody input').prop('checked',true);
                    }else{
                        $('tbody input').prop('checked',false);
                    }
                    form.render('checkbox');
                });

                //执行一个laydate实例
                laydate.render({
                    elem: '#start' //指定元素
                });

                //执行一个laydate实例
                laydate.render({
                    elem: '#end' //指定元素
                });


            });


            function delAll (argument) {
                var ids = [];

                // 获取选中的id
                $('tbody input').each(function(index, el) {
                    if($(this).prop('checked')){
                        ids.push($(this).val())
                    }
                });

                layer.confirm('确认要删除吗？'+ids.toString(),function(index){
                    //捉到所有被选中的，发异步进行删除
                    layer.msg('删除成功', {icon: 1});
                    $(".layui-form-checked").not('.header').parents('tr').remove();
                });
            }
        },
    }


</script>

<style scoped>

</style>